<template>
  <div id="index">
      <div class="flex">
        <el-row class="tac">
          <el-col :span="12">
        <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
<!-- 表格开始 -->
      <el-submenu 
        v-for="(value,index) in name.length" :key="index"
        index= index+1
        >
        <!-- index 当前的下标 -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span> {{name[index].id}} </span>
          <!-- 开头名字 -->
        </template>
        <el-menu-item-group>
          <el-menu-item 
            v-for="(_value,_index) in name[index].top" 
            :key="_index"
            @click="fn(index,_index)"
            >
                {{name[index].top[_index]}}
          </el-menu-item>
          <!-- <el-menu-item index="1-1">选项2</el-menu-item>
          <el-menu-item index="1-3">选项3</el-menu-item> -->
        </el-menu-item-group>
        </el-submenu> 
<!-- 结束 -->
        </el-menu>
        </el-col>
        </el-row>
      </div>
      <div class="main">
        <div class="maindiv">
          <p v-for="(value,index) in txt" :key="index">
            {{txt[index] }}
          </p>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
  export default {
      data(){
          return {
              num:0,//默认值
              name:"",//axios的值
              ind:0,
              _ind:0,
              txt:""
          }
      },
    methods: {
        fn(a,b){
            this.ind = a;
            this._ind = b;
            this.txt = this.name[a].text[b];
            // console.log(this.name[this.ind].text[this._ind][0])
            // console.log(this.name[this.ind].text[this._ind]);
        },
        fc(vin){
          this.tex=vin;
          
        }
    },
    mounted(){ 
        axios.get("/note.json").then(res => {
            this.name = res.data;
            this.text = this.name[this.ind].text[this._ind];
            this.txt = res.data[0].text[0];

            // this.name获取盛放css,jquery的数组
        })
    }
  }
</script>

<style>
*{
    margin: 0;
    padding:0;
}
.flex{
    float:left;
    width: 300px;
}
.maindiv {
  width: 800px;
  position: fixed;
  top: 10px;
  left: 300px;
  overflow: auto;
  height: 500px;
}
.main p {
  padding: 5px;
  font-size: 17px;
  font-family: "微软雅黑";
}
</style>